<template>
	<view class="body-box">
		<SwitchPatient :fun="swit"></SwitchPatient>
		<view class="header">
			<view class="header-left"><text>近一年</text></view>
			<view class="example-body">
				<uni-datetime-picker
					v-model="Data.single"
					type="daterange"
					@maskClick="maskClick"
					@change='dateChange'
				>
					<view class="picker">
						<text>选择时间</text>
						<view class="iconfont icon-xiangxia1"></view>
					</view>
				</uni-datetime-picker>
			</view>
		</view>
		<view class="no-data"  v-if="Data.data.length==0" >
			<text>暂无数据</text>
		</view>
		<view class="content-box" v-for="v in Data.data" :key="v.id">
			<view class="content-date">
				<text>{{v.medicalRecordDate}}</text>
				<view class="content-label"><text>{{v.openBillingDepartment}}</text></view>
			</view>
			<view class="content-information">
				<view class="information-title">
					<text>医生</text>
					<text>就诊人</text>
					<text>诊断</text>
				</view>
				<view class="information-text">
					<text>{{v.doctor}}</text>
					<text>{{v.patient.name}}</text>
					<text>{{v.diagnosis}}</text>
				</view>
			</view>
			<view class="content-btn">
				<view class="check-btn" @click="checkMedicalRecord(v)">
					<text>查看病历</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { consMedicalRecordQueryApi } from '@/api/ViewServices'
import SwitchPatient from '@/components/SwitchPatient.vue'
import { reactive, onMounted } from 'vue'
import {reportFormStore} from '@/store/reportFormStore.js'

const store=reportFormStore()
let Data = reactive({ 
	single:[] ,
	patientId:'',
	data:''
	})
let checkMedicalRecord = (list) => {
	store.caseList=list
	// store.set((v)=>{
	// 	v['case']=list
	// })
	
	uni.navigateTo({
		url: `/pages/caseHistory/recordsDetail/recordsDetail`
	})
}
let render=(id)=>{
	consMedicalRecordQueryApi({patientId:id,startDate: Data.single[0],endDate:Data.single[1]}).then(({data}) => {
		Data.data = data.data
	})
}
let dateChange=(e)=>{
	Data.single = e
	render(Data.patientId)
}
let swit=(v)=>{
	Data.patientId=v.id
	render(v.id)
}
let maskClick = () => {

}
onMounted(() => {
	const toDate = (t) => {
	                return t.split('/').join('-')
	            } 
	let date=new Date()
	let endTime=toDate(date.toLocaleDateString())
	let startTime=toDate(new Date(date.setFullYear(date.getFullYear()-1)).toLocaleDateString())
	Data.single.push(startTime)
	Data.single.push(endTime)
})
</script>

<style scoped lang="less">
.body-box {
	width: 750rpx;
	background: #fbfdff;
}
.header {
	width: 688rpx;
	height: 72rpx;
	padding: 20rpx 30rpx;
	display: flex;

	.header-left {
		width: 130rpx;
		height: 52rpx;
		background-color: #006eff;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			color: white;
			font-size: 26rpx;
		}
	}

	.picker {
		width: 180rpx;
		height: 52rpx;
		margin-left: 36rpx;
		background-color: #e4f0ff;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #4294ff;

		.iconfont {
			font-size: 20rpx;
			margin-left: 12rpx;
		}
	}
}
.content-box {
	width: 688rpx;
	height: 400rpx;
	margin: 0 30rpx 22rpx 30rpx;
	background-color: white;
	box-shadow: 0 0 3px #e0e0e0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.content-date {
		width: 630rpx;
		height: 100rpx;
		border-bottom: 1px solid #f4f4f4;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text:nth-child(1) {
			font-size: 30rpx;
		}
		.content-label {
			width: 142rpx;
			height: 42rpx;
			background: #cdf4e6;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			text {
				font-size: 24rpx;
				color: #03ca82;
			}
		}
	}
	.content-information {
		width: 630rpx;
		height: 190rpx;
		border-bottom: 1px solid #f4f4f4;
		display: flex;
		.information-title {
			width: 110rpx;
			height: 154rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text {
				font-size: 24rpx;
				color: #c8b2bd;
			}
		}
		.information-text {
			width: 400rpx;
			height: 154rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text {
				font-size: 26rpx;
			}
		}
	}
	.content-btn {
		width: 630rpx;
		height: 110rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.check-btn {
			width: 162rpx;
			height: 66rpx;
			font-size: 24rpx;
			background: #006eff;
			border-radius: 10rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.no-data{
		display: flex;
		justify-content: center;
		margin: 200rpx 100rpx;
		font-size: 40rpx;
	}
</style>
